<template>
  <div class="week-wrapper">
    <div
      @click="choose(index, item.date)"
      v-for="(item, index) in dateList"
      :key="index"
      class="week"
      :class="{ 'week-active': dateIndex == index }"
    >
      <div class="week-day">
        <text>{{ item.week }}</text>
      </div>
      <div class="week-date">
        <text>{{ item.day }}</text>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
const emit = defineEmits(['change'])
let dateIndex = ref(0)
let dateList = reactive([])
const { appContext } = getCurrentInstance()
const utils = appContext.config.globalProperties.$utils
const getDateList = () => {
  let date = new Date()
  for (let i = 0; i < 7; i++) {
    dateList.push({
      week: utils.getWeek(date),
      day: date.format('dd'),
      date: date.format('yyyy-MM-dd')
    })
    date = utils.addDate(date, 1)
  }
}
// 初始化数据
getDateList()
const choose = (index, date) => {
  dateIndex.value = index
  emit('change', dateList[dateIndex.value])
}
</script>

<style scoped lang="scss">
.week {
  text-align: center;
  color: $color_525;
  font-weight: 700;

  &-day {
    font-size: 0.373333rem;
    margin-top: 0.16rem;
  }

  &-date {
    display: inline-block;
    margin-top: 0.16rem;
    width: 0.8rem;
    height: 0.8rem;
    line-height: 0.8rem;
    border-radius: 50%;
    transition: background-color 0.2s;
  }

  &-active {
    color: white;
    background-color: $color_primary;
    border-radius: 0.4rem;
  }

  &-wrapper {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
  }
}
</style>
